<!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN">
<html>
<head lang=en>
    <title>条形码扫描示例</title>
    <meta content="text/html; charset=UTF-8" http-equiv=Content-Type>
    <meta name=viewport content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=GENERATOR content="MShtml 8.00.6001.23588">
    <script type="text/javascript" src="__STATIC__/common/barcode/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="__STATIC__/common/barcode/js/util.js"></script>
    <script type="text/javascript" src="__STATIC__/common/barcode/js/quagga.min.js"></script>
    <script type="text/javascript" src="__STATIC__/common/barcode/js/LocalResizeIMG.js"></script>
    <script type="text/javascript" src="__STATIC__/common/barcode/js/patch/mobileBUGFix.mini.js"></script>
    <script type="text/javascript">

        if(document.documentElement.clientWidth/7.5<=100){
            document.documentElement.style.fontSize = document.documentElement.clientWidth/7.5 + 'px';
        }else{
            document.documentElement.style.fontSize = 100 + 'px';
        }

        $(document).ready(function(){

            //文件上传
            $.each($('input:file'), function(index, item){
                //文件压缩
                $(item).localResizeIMG({
                    //width : 800,
                    quality : 1,
                    before : function(){
                        util.showMask();
                    },
                    success : function(result){
                        var imgData = result.clearBase64;
                        Quagga.decodeSingle({
                            //解码方式，与条形码的编码方式有关
                            decoder: {
                                readers: ["code_128_reader", "ean_reader", "ean_8_reader", "code_39_reader", "code_39_vin_reader", "codabar_reader", "upc_reader", "upc_e_reader", "i2of5_reader"]
                            },
                            locate: true, // 尝试在图像中定位条形码
                            src: 'data:image/jpg;base64,' + imgData // 或 'data:image/jpg;base64,' + data
                        }, function(result){
                            if(result) {
                                console.log(result)
                                // alert(result)
                                if(result.codeResult) {
                                    $("#result").val(result.codeResult.code);
                                } else {
                                    $("#result").val("");
                                    alert("识别失败，请重新扫码!");
                                }
                            }else{
                                alert("挂了!");
                                $("#result").val("");
                            }
                            util.removeMask();
                        });
                    }
                });
            });
        });

    </script>
</head>
<body>
<section>
    <div style="position: absolute; top: 0;">
        <form id="sform" method="post" name="sform" enctype="multipart/form-data">
            <p>
                <span style="font-size: 14px;"><label id="scan_code">条码：</label></span>
                <span><input class="infoInput"
                             id="result" style="width: 120px;" type="text" placeholder="" readonly="readonly" /></span>
                <input type="button" class="upload-btn" value="扫码" onclick="$('#code').click();" />
                <input id="code" class="pad10 b-f" style="display: none;" type="file" accept="image/*" />
            </p>
        </form>
    </div>
</section>
</body>
</html>
